<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大城市预报</title>
    <link rel="stylesheet" href="../business/csyb/css/csyb.css" />
    <link rel="stylesheet" href="../business/common/css/common.css" />
</head>

<body>
    <div class="city_forecast">
        <div class="city_forecast_content">
            <div class="title flex itemcenter between">
                <span class="city_title">大城市预报</span>
                <div class="flex itemcenter">
                    <div class="data_source">
                        <span>数据源 ：</span>
                        <select>
                            <option>主观格点</option>
                            <option>国家指导</option>
                            <option>载入最新</option>
                        </select>
                    </div>
                    <div class="flex city_time itemcenter">
                        <span>时次：</span>
                        <ul class="flex time_item">
                            <li>05:25</li>
                            <li class="active">10:00</li>
                            <li>15:45</li>
                        </ul>
                    </div>
                </div>
                <ul class="flex head_btn">
                    <li id="remakeBtn"><i></i>重做</li>
                    <li id="loadPrevBtn"><i></i>载入上次</li>
                    <li id="saveBtn"><i></i>保存</li>
                    <li id="publishBtn"><i></i>发布</li>
                    <li id="lowerHairBtn"><i></i>下发</li>
                    <li id="downBtn"><i></i>下载</li>
                    <li id="historyBtn"><i></i>历史产品</li>
                    <li id="fullScreenBtn"><i></i>全屏</li>
                </ul>
            </div>
            <div class="city_forecast_main">
                <div class="forecast_main_top flex between">
                    <div class="temp">
                        <div class="element_data">
                            <span>温度</span>
                            <input type="text" value="2">
                            <span>℃</span>
                        </div>
                        <div class="element_icon" id="temp_icon">
                            <i>T+</i>
                            <i>T-</i>
                            <i>T=</i>
                        </div>
                    </div>
                    <div class="rain">
                        <div class="element_data">
                            <span>降水量</span>
                            <input type="text" value="0.2">
                            <span>mm</span>
                        </div>
                        <div class="element_icon" id="rain_icon">
                            <i>R+</i>
                            <i>R-</i>
                            <i>R=</i>
                        </div>
                    </div>
                    <div class="ws flex between">
                        <div class="writing flex between wrap">
                            <span data-val="0">≤3级</span>
                            <span data-val="1">3~4级</span>
                            <span data-val="2">4~5级</span>
                            <span data-val="3">5~6级</span>
                            <span data-val="4">6~7级</span>
                            <span data-val="5">7~8级</span>
                            <span data-val="6">8~9级</span>
                            <span data-val="7">9~10级</span>
                            <span data-val="8">10~11级</span>
                            <span data-val="9">11~12级</span>
                        </div>
                        <div class="writing_data">
                            <div class="element_data">
                                <span>风速</span>
                                <input type="text" value="0.2">
                                <span>m/s</span>
                            </div>
                            <div class="element_icon" id="ws_icon">
                                <i>W+</i>
                                <i>W-</i>
                                <i>W=</i>
                            </div>
                        </div>
                    </div>
                    <div class="wd">
                        <div class="element_data">
                            <span>风向</span>
                            <select>
                                <option data-key="8">北</option>
                                <option data-key="1">东北</option>
                                <option data-key="2">东</option>
                                <option data-key="3">东南</option>
                                <option data-key="4">南</option>
                                <option data-key="5">西南</option>
                                <option data-key="6">西</option>
                                <option data-key="7">西北</option>
                            </select>
                        </div>
                    </div>
                    <div class="wp">
                        <div class="wp_data flex wrap">
                            <span data-val="00">晴</span>
                            <span data-val="01">多云</span>
                            <span data-val="02">阴</span>
                            <span data-val="03">阵雨</span>
                            <span data-val="04">雷阵雨</span>
                            <span data-val="05">雷阵雨并伴有冰雹</span>
                            <span data-val="06">雨夹雪</span>
                            <span data-val="13">阵雪</span>
                            <span data-val="18">雾</span>
                            <span data-val="19">冻雨</span>
                            <span data-val="20">沙尘暴</span>
                            <span data-val="29">浮尘</span>
                            <span data-val="30">扬沙</span>
                            <span data-val="31">强沙尘暴</span>
                            <span data-val="53">霾</span>
                            <span data-val="32">雨</span>
                            <span data-val="33">雪</span>
                        </div>
                    </div>
                </div>
                <div class="forecast_table">
                    <div class="table_main">
                        <div class="table_main_title flex itemcenter">
                            <i></i>
                            <span>站点：<a>市台</a></span>
                        </div>
                        <div class="tableData">
                            <table>
                                <thead>
                                    <tr>
                                        <th rowspan="2">时间</th>
                                        <th class="today" colspan="3">06月17日</th>
                                        <th class="tomorrow" rowspan="1">06月18日</th>
                                    </tr>
                                    <tr>
                                        <th>6</th>
                                        <th>12</th>
                                        <th>18</th>
                                        <th>24</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="wpSelect">
                                        <td class="textYellow">天气现象</td>
                                        <td>
                                            <select name="" id="wpSelect1">
                                            </select>
                                        </td>
                                        <td>
                                            <select name="" id="wpSelect2">
                                            </select>
                                        </td>
                                        <td>
                                            <select name="" id="wpSelect3">
                                            </select>
                                        </td>
                                        <td>
                                            <select name="" id="wpSelect4">
                                            </select>
                                        </td>
                                    </tr>
                                    <tr class="wsVal">
                                        <td>风速(m/s)</td>
                                        <td><input type="number" id="wsVal1" value=""></td>
                                        <td><input type="number" id="wsVal2" value=""></td>
                                        <td><input type="number" id="wsVal3" value=""></td>
                                        <td><input type="number" id="wsVal4" value=""></td>
                                    </tr>
                                    <tr class="wsGrade">
                                        <td>等级</td>
                                        <td>
                                            <select name="" id="wsGrade1">
                                            </select>
                                        </td>
                                        <td>
                                            <select name="" id="wsGrade2">
                                            </select>
                                        </td>
                                        <td>
                                            <select name="" id="wsGrade3">
                                            </select>
                                        </td>
                                        <td>
                                            <select name="" id="wsGrade4">
                                            </select>
                                        </td>
                                    </tr>
                                    <tr class="wdSelect">
                                        <td>风向</td>
                                        <td>
                                            <select name="" id="wdSelect1">
                                            </select>
                                        </td>
                                        <td>
                                            <select name="" id="wdSelect2">
                                            </select>
                                        </td>
                                        <td>
                                            <select name="" id="wdSelect3">
                                            </select>
                                        </td>
                                        <td>
                                            <select name="" id="wdSelect4">
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="textGreen">最高温</td>
                                        <td><input type="number" class="max1" value=""></td>
                                        <td><input type="number" class="max2" value=""></td>
                                        <td><input type="number" class="max3" value=""></td>
                                        <td><input type="number" class="max4" value=""></td>
                                    </tr>
                                    <tr>
                                        <td class="textGreen">最低温</td>
                                        <td><input type="number" class="min1" value=""></td>
                                        <td><input type="number" class="min2" value=""></td>
                                        <td><input type="number" class="min3" value=""></td>
                                        <td><input type="number" class="min4" value=""></td>
                                    </tr>
                                    <tr>
                                        <td class="textRed">6h降水量(mm)</td>
                                        <td><input type="number" class="rain1" value=""></td>
                                        <td><input type="number" class="rain2" value=""></td>
                                        <td><input type="number" class="rain3" value=""></td>
                                        <td><input type="number" class="rain4" value=""></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../business/csyb/js/csyb.js"></script>
</body>

</html>